<template>
	<div class="">
		<sh-card class="mb-3" title="支持虚拟滚动">
			<sh-list v-bind="listConfig1" :loading="loading" :data-sourse="dataSourse"></sh-list>
		</sh-card>
		<sh-card class="mb-3" title="支持自定义卡片">
			<sh-list v-bind="listConfig2" :loading="loading" :data-sourse="dataSourse">
				<template #item="item">
					<sh-card :title="item.label" class="mb-2"></sh-card>
				</template>
			</sh-list>
		</sh-card>
		<sh-card class="mb-3" title="支持分页">
			<sh-list v-bind="listConfig3" :loading="loading" :data-sourse="dataSourse">
				<template #item="item">
					<sh-card :title="item.label" class="mb-2"></sh-card>
				</template>
			</sh-list>
		</sh-card>
	</div>
</template>

<script>
export default {
	name: 'BaseList',
	data() {
		return {
			loading: false,
			dataSourse: [],
			listConfig1: {
				height: '200px',
				grid: false
			},
			listConfig2: {
				height: '200px',
				grid: { gutter: 20, span: 6 }
			},
			listConfig3: {
				height: '200px',
				pagerConfig: {
					currentPage: 1,
					pageSize: 10,
					total: 1000
				}
			}
		}
	},
	created() {},
	mounted() {
		this.getTableData()
	},
	methods: {
		getTableData() {
			const data = []
			this.dataSourse = []
			this.loading = true
			for (let i = 0; i <= 200; i++) {
				data.push({
					label: '大撒大' + i,
					nickName: 10 * Math.random()
				})
			}
			setTimeout(() => {
				this.loading = false
				this.dataSourse = data
			}, 1000)
		}
	}
}
</script>

<style scoped></style>
